<!-- wyf 2022-3-17 -->
<template>
  <a-calendar
    v-model:value="value1"
    :value-format="valueFormat"
    :disabled-date="disabledDate"
    :fullscreen="fullscreen"
    :locale="locale"
    :mode="mode"
    :valid-range="validRange"
    @change="change"
    @select="select"
  >
    <template v-if="$slots.dateCellRender" #dateCellRender="{ current }">
      <slot :current="current" name="dateCellRender" />
    </template>
    <template v-if="$slots.dateFullCellRender" #dateFullCellRender="{ current }">
      <slot :current="current" name="dateFullCellRender" />
    </template>
    <template v-if="$slots.headerRender" #headerRender="{ current, type, onChange, onTypeChange }">
      <slot :current="current" :type="type" :onChange="onChange" :onTypeChange="onTypeChange" name="headerRender" />
    </template>
    <template v-if="$slots.monthCellRender" #monthCellRender="{ current }">
      <slot :current="current" name="monthCellRender" />
    </template>
    <template v-if="$slots.monthFullCellRender" #monthFullCellRender="{ current }">
      <slot :current="current" name="monthFullCellRender" />
    </template>
    <slot />
  </a-calendar>
</template>

<script>
import { defineComponent, computed } from 'vue'
import { Calendar } from 'ant-design-vue'
export default defineComponent({
  name: 'ZCalendar',
  components: {
    ACalendar: Calendar
  },
  props: {
    value: {
      type: String,
      default: undefined
    },
    valueFormat: {
      type: String,
      default: undefined
    },
    disabledDate: {
      type: Function,
      default: undefined
    },
    fullscreen: {
      type: Boolean,
      default: true
    },
    locale: {
      type: Object,
      default: undefined
    },
    mode: {
      type: String,
      default: 'month'
    },
    validRange: {
      type: Array,
      default: undefined
    }
  },
  setup(props, _ref) {
    const value1 = computed({
      get() {
        return props.value
      },
      set(val) {
        _ref.emit('update:value', val)
      }
    })
    const change = (date) => {
      _ref.emit('change', date)
    }
    // const panelChange = (date, mode) => {
    //   _ref.emit('panelChange', date, mode)
    // }
    const select = (date) => {
      _ref.emit('select', date)
    }
    return {
      value1,
      change,
      // panelChange,
      select
    }
  }
})
</script>
